import {Cartesian3, SceneTransforms} from 'cesium';

/**
 * 创建、更新、清除测试过
 */
class Tips {

    constructor() {}
    /**
     * 创建提示
     * @param id  element 的 id的
     * @param content  "弹框的内容"
     * @param option  {
     *   "type": "text" |  "html"
     *   "isCenter":true | false 是否居中，默认 false
     *    "background":"#ffffff"  背景颜色
     *    "backgroundImage":"url(pic.jpg)",弹框背景图片,
     *    "color":"弹窗文字颜色"
     *    "position":{x:136,y:89,z:22} 弹框的位置 笛卡尔坐标 PIE3D.Cartesian3 并不是json的x,y,z
     *    "offsetX":200,  X轴偏移
     *    "offsetY":200,  Y轴偏移
     * }
     * @param cb  关闭的触发的函数
     */
    createTips(id: any, viewer: any, content: any, option: any, callback: any) {
        let divHtml = document.createElement('div')
        document.body.appendChild(divHtml);
        divHtml.style.position = 'absolute';
        if (option["type"] && option["type"] == 'html') {
            divHtml.setAttribute("id", id)
            divHtml.setAttribute("class", 'html-popup')
            divHtml.style.width = option["width"] + 'px' || "200px"
            divHtml.style.height = option["height"] + 'px' || "200px"
            divHtml.innerHTML = content;
        } else {
            divHtml.innerHTML = `<div id="${id}" style="padding:4px 6px;color:${option["color"] || "#000000"};">${content}</div>`
        }
        if (option['isCenter']) {
            divHtml.style.left = '50%'
            divHtml.style.top = '50%'
            divHtml.style.marginLeft = -option["width"] / 2 + 'px' || '-100px'
            divHtml.style.marginTop = -option["height"] / 2 + 'px' || '-100px'
        } else {
            let windowPosition = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Cartesian3.fromDegrees(option["position"][0], option["position"][1]));
            divHtml.style.left = (windowPosition.x + (option["offsetX"] || 0)) + 'px'
            divHtml.style.top = (windowPosition.y + (option["offsetY"] || 0)) + 'px'
        }

        viewer.scene.postRender.addEventListener(() => {
            var windowPosition = SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, Cartesian3.fromDegrees(option["position"][0], option["position"][1]));
            if (!windowPosition) {
                return;
            }
            divHtml.style.left = (windowPosition.x + option["offsetX"]) + 'px';
            divHtml.style.top = (windowPosition.y + option["offsetY"]) + 'px';
            const camerPosition = viewer.camera.position;
            let height = viewer.scene.globe.ellipsoid.cartesianToCartographic(camerPosition).height;
            height += viewer.scene.globe.ellipsoid.maximumRadius;
            if ((!(Cartesian3.distance(camerPosition, Cartesian3.fromDegrees(option["position"][0], option["position"][1])) > height)) && viewer.camera.positionCartographic.height < 50000000) {
                divHtml.style.display = "block"
            } else {
                divHtml.style.display = "none"
            }
        })
    }
    //清除提示
    clearTips(id: any) {
        document.getElementById(`${id}`)?.remove()
    }
    //清除所有提示
    clearallTips() {
        let documentArray = document.getElementsByClassName('html-popup')
        if (documentArray.length > 0) {
            for (let i = 0; i < documentArray.length; i++) {
                documentArray[i].parentNode?.removeChild(documentArray[i])
            }
        }
    }
}
export default new Tips()
